<template>
  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="true"
      finished-text="没有更多了"
      @load="load"
    >
        <!-- 商品卡片 -->
        <van-card
          v-for="(item, key) in list"
          :thumb="item.product.thumbs_text"
          @click-thumb="toProductInfo(item.proid)"
        >
          <template #title>
            <div class="title">{{item.product.name}}</div>
          </template>

          <template #desc>
            <van-highlight :keywords="`${item.total}`" :source-string="`人数：${item.total} 人`" highlight-class="people" />
            拼团时间：{{item.createtime_text}}(开始) ~ {{item.endtime_text}}(结束)<br />
            拼团价格：￥{{item.product.team}}<br />
          </template>

          <template #footer>
            <van-button type="danger" size="small" @click="TeamJoin(item.id,item.proid)">参与拼团</van-button>
            <van-button type="warning" size="small" @click="TeamInfo(item.id)">查看详情</van-button>
          </template>
          
        </van-card>
    </van-list>
  </van-pull-refresh>

  <van-button class="action" type="danger" @click="StartTeam" size="big" block>发起拼团</van-button>
</template>

<script setup>
import team from '@/routers/team';

  const {proxy} = getCurrentInstance();

  //判断是否有查询具体的商品的拼团
  let proid = proxy.$route.query.proid ? proxy.$route.query.proid : 0

  //下拉刷新的数据
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新

  //下拉刷新
  const refresh = async () =>
  {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true
    //加载数据方法
    load()
  }

  //加载数据方法 查询订单数据
  const load = async () =>
  {
    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }

    // 发送请求
    var result = await proxy.$POST({
      url: '/teamwork/index',
      params: {
        page:page.value,
        proid:proid
      }
    })

    //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    //如果没有更多数据了 就说明已经加载到底了....
    if(result.code == 0)
    {
      finished.value = true
      return;
    }

    list.value = list.value.concat(result.data)
    page.value++
  }

  //跳转到购物车详情界面
  const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})

  const TeamInfo = teamid => proxy.$router.push({path: '/team/info', query: {teamid}})

  //参与拼团
  const TeamJoin = async (teamid,proid) =>
  {
    //存放到cookie
    if(teamid)
    {
      proxy.$cookies.set('teamid',teamid)
    }

    //跳转到商品详情界面
    proxy.$router.push({path: '/product/info',query:{proid}})
  }

  const StartTeam = async () => {

    proxy.$cookies.set('teamid',0)

    proxy.$router.push({path: '/product/info',query:{proid}})
  }
</script>


<style>
  .people{
    color:red;
  }
</style>


<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .action{
    position: fixed;
    bottom: 0;
  }

</style>
  